<template>
	<div class="main">
		<div class="title">
			查询结果
		</div>
		<div class="tab">
			<Input class="search-ipt" placeholder="搜索结果"></Input>
			<Table border :columns="columnsTitle" :data="resData" style="position:static">
			</Table>
		</div>
	</div>
</template>

<script>
import { bus } from '../../assets/utitls/bus'
import includeItem from './Details'
var moment = require('moment')
moment.locale('zh-cn')
export default {
	components: {
		includeItem
	},
	data() {
		return {
			columnsTitle: [
				// 序号
				{
					title: '#',
					type: 'index',
					width: '50',
					sortable: true
				},
				// 设备id或运单号
				{
					title: 'id',
					width: '100',
					key: 'serialId'
				},
				{
					title: '运单',
					width: '150',
					key: ''
				},
				// 温度
				{
					title: '温度',
					width: '70',
					key: 'CurrentTemp',
					render: (h, params) => {
						let data = params.row.CurrentTemp
						// 判断温度是否为空，不为空添加‘℃’
						return data ? data + ' ℃' : '无数据'
					}
				},
				// 位置
				{
					title: '位置',
					key: 'readPlace',
					render: (h, params) => {
						let readPlace = params.row.readPlace
						return readPlace ? readPlace : '————'
					}
				},
				// 更新时间
				{
					title: '更新时间',
					width: '150',
					key: 'readTime',
					render: (h, params) => {
						let recTime = params.row.readTime
						// 将时间转换为unix时间进行计算
						let time = moment(recTime).format('X') // 设备记录时间
						let nowTime = moment().format('X') // 当前时间
						// 小于一天的显示几小时之前，超过一天的显示具体时间
						if ((nowTime - time) / 60 / 60 >= 120) {
							return recTime
						} else {
							return moment(recTime).fromNow()
						}
					}
				},
				{
					title: '报警',
					width: '50',
					key: 'CurrentTemp',
					render: (h, params) => {
						let data = params.row.CurrentTemp // 当前温度
						let upData = params.row.downTemperature // 温度上限
						let dowmData = params.row.upTemperature // 温度下限
						return h('span', {
							'class': {
								warning: true
							}
						}, [
							h('Icon', {
								props: {
									type: (data < dowmData ? 'arrow-graph-down-left' : data > upData ? 'arrow-graph-up-right' : dowmData < data < upData ? 'checkmark-round' : data)
								}
							})
						])
					}
				},
				// 电量
				{
					title: '电量',
					key: 'batValue',
					sortable: true,
					render: (h, params) => {
						// 电量信息
						let batteryNum = params.row.batValue
						// 转换为 number 类型
						batteryNum = parseFloat(batteryNum)
						return h('div', {
							'class': {
								battery: true
							}
						}, [
							h('Progress', {
								props: {
									percent: batteryNum, // 数值
									strokeWidth: 20, // 高度
									status: (batteryNum < 31) ? 'wrong' : 'normal', // 状态
									hideInfo: true
								}
							}),
							h('span')
						])
					}
				},
				// 详情
				{
					title: '详情',
					key: 'action',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'primary',
									size: 'small'
								},
								on: {
									click: () => {
										let id = params.row.serialId
										this.$router.push({
											path: '/data',
											query: { id: id },
											component: includeItem
										})
									}
								}
							}, '查看')
						])
					}
				}
				// 小图表,独立封装，render引入
				// {
				//     title: '数据',
				//     key: 'startToReadTemp',
				//     render: (h, params) => {
				//         return h('div',{
				//             'class':{
				//                 data: true
				//             }
				//         },[

				//         ])
				//     }
				// },
			]
		}
	},
	computed: {
		resData() {
			return this.$store.state.resData
		},
	},
	methods: {
	},
	watch: {
		// 监听结果
		'resData': {
			immediate: true,
			handler: (val) => {
				bus.$emit('resData', val)
			}
		}
	}
}
</script>

<style lang="less" scoped>
// 表格
.ivu-table-wrapper /deep/ {
	border: 0;
}

.main /deep/ {
	border: 1px solid #ddd;

	// 标题
	.title {
		padding: 14px 15px 7px;
		border: solid #e7eaec;
		border-top-width: 4px;
		border-bottom-width: 1px;
		border-left: 0;
		border-right: 0;
		font-size: 1.15em;
	}

	.tab {
		padding: 15px 20px 20px;

		.search-ipt {
			margin-bottom: 10px;
		}
	}

	table {
		width: 100% !important;

		th {
			text-align: center;
			background: none;
			border-right: 0;
		}

		td {
			border-right: 0;
		}
	}

	.ivu-table-cell {
		padding: 0;
		display: flex;
		justify-content: center;
	}

	// 电池进度
	.ivu-progress-show-info .ivu-progress-outer {
		padding: 0;
		margin: 0;
	}

	// 电池信息
	border-radius: 4px;

	// 电池图标
	.battery {
		border: 1px solid #999;
		border-radius: 4px;
		padding: 1px;
		position: relative;
		width: 50px;

		>span {
			position: absolute;
			background-color: #999;
			border-radius: 0 2px 2px 0;
			display: block;
			.size(4px, 8px);
			top: 6px;
			right: -4px;
		}

		.ivu-progress-inner,
		.ivu-progress-bg {
			border-radius: 4px;
		}
	}

	// 报警
	.warning {
		display: block;

		>i {
			font-size: 1.6em;
			color: #f00;
		}

		// 超下限
		>i.ivu-icon-arrow-graph-down-left {
			color: #0084ff;
		}

		// 超上线
		>i.ivu-icon-arrow-graph-up-right {
			color: #ed3f14;
		}

		// 合适
		>i.ivu-icon-checkmark-round {
			color: #60bf60;
		}
	}
}
</style>
